ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ 'this' ಬೈಂಡಿಂಗ್: ಕಾಂಟೆಕ್ಸ್ಟ್ ಸ್ವಿಚಿಂಗ್ ಮತ್ತು ಆರೋ ಫಂಕ್ಷನ್ ವರ್ತನೆಯಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿನ this ಕೀವರ್ಡ್ ಒಂದು ಶಕ್ತಿಯುತ ಆದರೆ ಆಗಾಗ್ಗೆ ಗೊಂದಲಮಯವಾದ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ. ಇದು ಒಂದು ಫಂಕ್ಷನ್‌ನ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಅಂದರೆ ಆ ಫಂಕ್ಷನ್ ಯಾವ ಆಬ್ಜೆಕ್ಟ್‌ನ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. this ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸರಿಯಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಬರೆಯಲು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಅತ್ಯಗತ್ಯ. ಈ ಮಾರ್ಗದರ್ಶಿ this ಅನ್ನು ನಿಗೂಢತೆಯಿಂದ ಹೊರತರುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ, ಅದರ ವಿವಿಧ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳು, ಅದನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು, ಮತ್ತು ಆರೋ ಫಂಕ್ಷನ್‌ಗಳ ವಿಶಿಷ್ಟ ವರ್ತನೆಯನ್ನು ಒಳಗೊಂಡಿದೆ. ನಾವು ವಿಶ್ವಾದ್ಯಂತ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ನಿಮ್ಮ ಸ್ಥಳ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಪಷ್ಟತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತೇವೆ.

ಡೀಫಾಲ್ಟ್ 'this' ಬೈಂಡಿಂಗ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, this ನ ಮೌಲ್ಯವು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ, ಫಂಕ್ಷನ್ ಅನ್ನು ಹೇಗೆ ಕರೆಯಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಬೈಂಡಿಂಗ್ ನಿಯಮಗಳು ಹೀಗಿವೆ:

1. ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್

ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ (ಅಂದರೆ, ಆಬ್ಜೆಕ್ಟ್ ಅಥವಾ ಇನ್ನೊಂದು ಫಂಕ್ಷನ್‌ನೊಳಗೆ ಇಲ್ಲದಿದ್ದಾಗ) ಕರೆದಾಗ, this ಗ್ಲೋಬಲ್ ಆಬ್ಜೆಕ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ window ಆಬ್ಜೆಕ್ಟ್ ಆಗಿರುತ್ತದೆ. Node.js ನಲ್ಲಿ, ಇದು global ಆಬ್ಜೆಕ್ಟ್ ಆಗಿರುತ್ತದೆ. ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್‌ನಲ್ಲಿ ("use strict";), ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ this undefined ಆಗಿರುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

ಉದಾಹರಣೆ (ಬ್ರೌಸರ್):

            function globalFunction() {
  console.log(this === window); // true (without strict mode)
  console.log(this); // window object (without strict mode)
}

globalFunction();

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ (Node.js):

            function globalFunction() {
  console.log(this === global); // true (without strict mode)
  console.log(this); // global object (without strict mode)
}

globalFunction();

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ (ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್):

            "use strict";
function globalFunction() {
  console.log(this === undefined); // true
  console.log(this); // undefined
}

globalFunction();

            

              
                Copy
              
            
          

2. ಇಂಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್

ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಆಬ್ಜೆಕ್ಟ್‌ನ ಮೆಥಡ್ ಆಗಿ ಕರೆದಾಗ, this ಆ ಮೆಥಡ್ ಅನ್ನು ಕರೆಯುತ್ತಿರುವ ಆಬ್ಜೆಕ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಇದನ್ನು ಇಂಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ ಸೂಚ್ಯವಾಗಿ ಒದಗಿಸಲ್ಪಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

            const myObject = {
  name: "Example Object",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

myObject.greet(); // Output: Hello, my name is Example Object

            

              
                Copy
              
            
          

3. ಎಕ್ಸ್‌ಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ this ನ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸಲು ಮೂರು ಮೆಥಡ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ – call, apply, ಮತ್ತು bind. ಇಂಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್ ಅಪೇಕ್ಷಿತ ವರ್ತನೆಯನ್ನು ಒದಗಿಸದಿದ್ದಾಗ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ಈ ಮೆಥಡ್‌ಗಳು ಅತ್ಯಗತ್ಯವಾಗಿವೆ.

a. call

call ಮೆಥಡ್ ನಿಮಗೆ ನಿರ್ದಿಷ್ಟ this ಮೌಲ್ಯ ಮತ್ತು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನೀಡಿ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್:

            function.call(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.call(anotherPerson, "Hello"); // Output: Hello, my name is Bob

            

              
                Copy
              
            
          

b. apply

apply ಮೆಥಡ್ call ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಇದು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಅರೇ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್:

            function.apply(thisArg, [argsArray])

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ:

            const person = {
  name: "Alice",
  greet: function(greeting, punctuation) {
    console.log(greeting + ", my name is " + this.name + punctuation);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.apply(anotherPerson, ["Hello", "!"]); // Output: Hello, my name is Bob!

            

              
                Copy
              
            
          

c. bind

bind ಮೆಥಡ್ ಒಂದು ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಅದನ್ನು ಕರೆದಾಗ ಅದರ this ಕೀವರ್ಡ್ ಅನ್ನು ಒದಗಿಸಿದ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ. call ಮತ್ತು apply ಗಳಂತೆ, bind ಫಂಕ್ಷನ್ ಅನ್ನು ತಕ್ಷಣವೇ ಕರೆಯುವುದಿಲ್ಲ; ಇದು ನಂತರ ಕರೆಯಬಹುದಾದ ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್:

            function.bind(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

const greetBob = person.greet.bind(anotherPerson, "Hello");
greetBob(); // Output: Hello, my name is Bob

            

              
                Copy
              
            
          

4. ನ್ಯೂ ಬೈಂಡಿಂಗ್

ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು new ಕೀವರ್ಡ್‌ನೊಂದಿಗೆ ಕರೆದಾಗ, ಒಂದು ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ರಚನೆಯಾಗುತ್ತದೆ, ಮತ್ತು this ಆ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಬೈಂಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ ಆಬ್ಜೆಕ್ಟ್‌ನ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

            function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const alice = new Person("Alice");
alice.greet(); // Output: Hello, my name is Alice

            

              
                Copy
              
            
          

ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಲೆಕ್ಸಿಕಲ್ 'this'

ECMAScript 6 (ES6) ನಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು (() => {}) this ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಒಂದು ವಿಶಿಷ್ಟವಾದ ವರ್ತನೆಯನ್ನು ಹೊಂದಿವೆ. ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಆರೋ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ತಮ್ಮದೇ ಆದ this ಬೈಂಡಿಂಗ್ ಇರುವುದಿಲ್ಲ. ಬದಲಿಗೆ, ಅವು ಸುತ್ತಮುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ this ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತವೆ, ಇದನ್ನು ಲೆಕ್ಸಿಕಲ್ ಸ್ಕೋಪಿಂಗ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ಆರೋ ಫಂಕ್ಷನ್‌ನೊಳಗಿನ this, ಅದನ್ನು ಸುತ್ತುವರಿದ ಫಂಕ್ಷನ್ ಅಥವಾ ಸ್ಕೋಪ್‌ನ this ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸುತ್ತದೆ.

this ನ ಈ ಲೆಕ್ಸಿಕಲ್ ಬೈಂಡಿಂಗ್ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಬಹುದು ಮತ್ತು ಸಾಂಪ್ರದಾಯಿಕ ಫಂಕ್ಷನ್ ಬೈಂಡಿಂಗ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಸಾಮಾನ್ಯ ಅಪಾಯಗಳನ್ನು ತಪ್ಪಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಮತ್ತು ನೆಸ್ಟೆಡ್ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.

ಉದಾಹರಣೆ:

            const myObject = {
  name: "Example Object",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, my name is " + this.name); // this refers to myObject
    }, 1000);
  }
};

myObject.greet(); // Output (after 1 second): Hello, my name is Example Object

            

              
                Copy
              
            
          

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, setTimeout ಒಳಗಿನ ಆರೋ ಫಂಕ್ಷನ್ greet ಫಂಕ್ಷನ್‌ನಿಂದ this ಅನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ, ಅದು myObject ಗೆ ಬೈಂಡ್ ಆಗಿದೆ. ಆರೋ ಫಂಕ್ಷನ್‌ ಬದಲು ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್‌ ಬಳಸಿದ್ದರೆ, ಸರಿಯಾದ ಕಾಂಟೆಕ್ಸ್ಟ್‌ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ನೀವು .bind(this) ಬಳಸಬೇಕಾಗಿತ್ತು ಅಥವಾ this ಅನ್ನು ಒಂದು ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಕಾಗಿತ್ತು (ಉದಾ., const self = this;).

ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ವ್ಯತ್ಯಾಸ:

            const myObject = {
  name: "Example Object",
  greet: function() {
    const self = this; // Capture 'this'
    setTimeout(function() {
      console.log("Hello, my name is " + self.name); // Need to use 'self'
    }, 1000);
  }
};

myObject.greet();

            

              
                Copy
              
            
          

'this' ಬೈಂಡಿಂಗ್ ನಿಯಮಗಳ ಆದ್ಯತೆ

ಬಹು ಬೈಂಡಿಂಗ್ ನಿಯಮಗಳು ಅನ್ವಯವಾದಾಗ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ this ನ ಮೌಲ್ಯವನ್ನು ನಿರ್ಧರಿಸಲು ನಿರ್ದಿಷ್ಟ ಆದ್ಯತೆಯ ಕ್ರಮವನ್ನು ಅನುಸರಿಸುತ್ತದೆ:

1. ನ್ಯೂ ಬೈಂಡಿಂಗ್: ಫಂಕ್ಷನ್ ಅನ್ನು new ನೊಂದಿಗೆ ಕರೆದರೆ, this ಹೊಸದಾಗಿ ರಚಿಸಲಾದ ಆಬ್ಜೆಕ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
2. ಎಕ್ಸ್‌ಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್: call, apply, ಅಥವಾ bind ಬಳಸಿದರೆ, this ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ.
3. ಇಂಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್: ಫಂಕ್ಷನ್ ಅನ್ನು ಆಬ್ಜೆಕ್ಟ್‌ನ ಮೆಥಡ್ ಆಗಿ ಕರೆದರೆ, this ಆ ಆಬ್ಜೆಕ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
4. ಡೀಫಾಲ್ಟ್ ಬೈಂಡಿಂಗ್: ಮೇಲಿನ ಯಾವುದೇ ನಿಯಮಗಳು ಅನ್ವಯವಾಗದಿದ್ದರೆ, this ಗ್ಲೋಬಲ್ ಆಬ್ಜೆಕ್ಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ (ಅಥವಾ ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್‌ನಲ್ಲಿ undefined).

ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು, ತಮ್ಮ ಲೆಕ್ಸಿಕಲ್ this ನೊಂದಿಗೆ, ಈ ನಿಯಮಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬೈಪಾಸ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ತಮ್ಮ ಸುತ್ತಮುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ this ಅನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತವೆ.

ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು

ವಿವಿಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ this ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಿವೆ:

1. ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ (ಉದಾಹರಣೆಗೆ, ಬಟನ್ ಕ್ಲಿಕ್‌ಗಳು, ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು), this ಸಾಮಾನ್ಯವಾಗಿ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದ DOM ಎಲಿಮೆಂಟ್‌ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ (ಬ್ರೌಸರ್):

            <button id="myButton">Click Me</button>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    console.log(this === button); // true
    this.textContent = "Clicked!"; // Change button text
  });
</script>

            

              
                Copy
              
            
          

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ ಆರೋ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದು ನೀವು ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಬೇಕಾದರೆ ಕಷ್ಟವಾಗಬಹುದು, ಏಕೆಂದರೆ this ಆ ಎಲಿಮೆಂಟ್‌ಗೆ ಬೈಂಡ್ ಆಗುವುದಿಲ್ಲ. ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್ ಬಳಸುವುದು ಅಥವಾ ಈವೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ (event.target) ಅನ್ನು ಪ್ರವೇಶಿಸುವುದು ಹೆಚ್ಚು ಸೂಕ್ತ.

2. ಆಬ್ಜೆಕ್ಟ್-ಓರಿಯೆಂಟೆಡ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ (OOP)

OOP ಯಲ್ಲಿ, ಆಬ್ಜೆಕ್ಟ್‌ನ ಮೆಥಡ್‌ಗಳೊಳಗೆ ಆಬ್ಜೆಕ್ಟ್‌ನ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ಮೆಥಡ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು this ಮೂಲಭೂತವಾಗಿದೆ. ಡೇಟಾ ಮತ್ತು ವರ್ತನೆಯನ್ನು ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟ್ ಮಾಡುವ ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಅತ್ಯಗತ್ಯ.

ಉದಾಹರಣೆ:

            class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.getArea()); // Output: 50

            

              
                Copy
              
            
          

3. ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು

ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸುವಾಗ (ಉದಾಹರಣೆಗೆ, ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳಲ್ಲಿ), this ನ ಮೌಲ್ಯವು ಅನಿರೀಕ್ಷಿತವಾಗಿರಬಹುದು. ಆರೋ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಲೆಕ್ಸಿಕಲ್ this ಅನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.

ಉದಾಹರಣೆ:

            function fetchData(callback) {
  // Simulate an asynchronous operation
  setTimeout(() => {
    const data = { message: "Data fetched successfully" };
    callback(data);
  }, 1000);
}

const myObject = {
  name: "My Object",
  processData: function() {
    fetchData((data) => {
      console.log(this.name + ": " + data.message); // 'this' refers to myObject
    });
  }
};

myObject.processData(); // Output (after 1 second): My Object: Data fetched successfully

            

              
                Copy
              
            
          

4. ಕ್ಲೋಶರ್‌ಗಳು

ಕ್ಲೋಶರ್‌ಗಳು ಕೆಲವೊಮ್ಮೆ this ನೊಂದಿಗೆ ಅನಿರೀಕ್ಷಿತ ರೀತಿಯಲ್ಲಿ ಸಂವಹನ ನಡೆಸಬಹುದು. ಕ್ಲೋಶರ್‌ಗಳು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು, this ಸೇರಿದಂತೆ, ಹೇಗೆ ಕ್ಯಾಪ್ಚರ್ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ.

ಉದಾಹರಣೆ:

            function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
console.log(counter.getCount()); // Output: 2

            

              
                Copy
              
            
          

ಅಪಾಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

this ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸಿದರೂ, ಇದು ಸಾಮಾನ್ಯ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಇಲ್ಲಿ ತಪ್ಪಿಸಬೇಕಾದ ಕೆಲವು ಅಪಾಯಗಳು ಮತ್ತು ಅನುಸರಿಸಬೇಕಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿವೆ:

• ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ 'this' ಕಳೆದುಕೊಳ್ಳುವುದು: ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ this ಸರಿಯಾಗಿ ಬೈಂಡ್ ಆಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. .bind() ಅಥವಾ ಆರೋ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಅಥವಾ ಈವೆಂಟ್ ಟಾರ್ಗೆಟ್ ಅನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸಿ.
• ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳಲ್ಲಿ 'this' ಗೊಂದಲ: ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನ ಬಗ್ಗೆ ಗಮನವಿರಲಿ, ವಿಶೇಷವಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳಲ್ಲಿ. ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು ಇದನ್ನು ಹೆಚ್ಚಾಗಿ ಸರಳಗೊಳಿಸಬಹುದು.
• ಎಕ್ಸ್‌ಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್‌ನ ಅತಿಯಾದ ಬಳಕೆ: call, apply, ಮತ್ತು bind ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಇಂಪ್ಲಿಸಿಟ್ ಬೈಂಡಿಂಗ್ ಅಥವಾ ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು ಅಪೇಕ್ಷಿತ ಫಲಿತಾಂಶವನ್ನು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿ ಸಾಧಿಸಬಹುದೇ ಎಂದು ಪರಿಗಣಿಸಿ.
• ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್‌ನಲ್ಲಿ 'this': ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್‌ನಲ್ಲಿ ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ this undefined ಆಗಿರುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ.
• ಲೆಕ್ಸಿಕಲ್ 'this' ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಆರೋ ಫಂಕ್ಷನ್‌ಗಳು ಸುತ್ತಮುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ this ಅನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತವೆ ಎಂಬುದನ್ನು ಅರಿತುಕೊಳ್ಳಿ, ಇದು ಪ್ರಯೋಜನಕಾರಿಯಾಗಿರಬಹುದು ಆದರೆ ಎಚ್ಚರಿಕೆಯ ಪರಿಗಣನೆಯ ಅಗತ್ಯವಿರುತ್ತದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಯ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಡೆವಲಪರ್‌ನ ಸ್ಥಳ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ, ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಲ್ಲ ಕೋಡ್ ಬರೆಯುವುದು ಮುಖ್ಯ. this ನ ಸ್ಪಷ್ಟ ಮತ್ತು ಸ್ಥಿರವಾದ ಬಳಕೆ, ಸಮಗ್ರ ಡಾಕ್ಯುಮೆಂಟೇಶನ್‌ನೊಂದಿಗೆ, ನಿಮ್ಮ ಕೋಡ್ ವಿಶ್ವಾದ್ಯಂತ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಸ್ಥಿರವಾದ ನಾಮಕರಣ ಸಂಪ್ರದಾಯಗಳನ್ನು ಬಳಸುವುದು ಮತ್ತು ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಮಾದರಿಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಸಹ ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಕೋಡ್ ಅಥವಾ ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ಭಾಷಾ-ನಿರ್ದಿಷ್ಟ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ-ನಿರ್ದಿಷ್ಟ ಪದಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ವಿವಿಧ ತಂಡಗಳು ಮತ್ತು ಪ್ರದೇಶಗಳಾದ್ಯಂತ ಪರಸ್ಪರ ಕಾರ್ಯಸಾಧ್ಯತೆ ಮತ್ತು ಸಹಯೋಗವನ್ನು ಉತ್ತೇಜಿಸಲು ಪ್ರಮಾಣಿತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಂಪ್ರದಾಯಗಳಿಗೆ ಅಂಟಿಕೊಳ್ಳಿ.

ತೀರ್ಮಾನ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ this ಕೀವರ್ಡ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ವಿಸ್ತರಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬರೆಯಲು ಅತ್ಯಗತ್ಯ. ವಿವಿಧ ಬೈಂಡಿಂಗ್ ನಿಯಮಗಳು, ಆರೋ ಫಂಕ್ಷನ್‌ಗಳ ವರ್ತನೆ, ಮತ್ತು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ದಕ್ಷ ಮತ್ತು ಸುಲಭವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಂತಹ ಕೋಡ್ ಬರೆಯಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ ಮತ್ತು ಜಾಗತಿಕ ಕಾಂಟೆಕ್ಸ್ಟ್‌ ಅನ್ನು ಪರಿಗಣಿಸುವ ಮೂಲಕ, ನೀವು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರವೇಶಿಸಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಈ ತಿಳುವಳಿಕೆ ಅಂತರರಾಷ್ಟ್ರೀಯ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿ ತಂಡದ ಕೆಲಸಕ್ಕೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.

this ನ ನಿಮ್ಮ ತಿಳುವಳಿಕೆಯನ್ನು ದೃಢಪಡಿಸಲು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಅಭ್ಯಾಸ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಿ. ಈ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯ ಮೇಲೆ ದೃಢವಾದ ಹಿಡಿತದೊಂದಿಗೆ, ನೀವು ಅತ್ಯಂತ ಸಂಕೀರ್ಣವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸವಾಲುಗಳನ್ನು ಸಹ ಎದುರಿಸಲು ಸುಸಜ್ಜಿತರಾಗಿರುತ್ತೀರಿ.